<template>
	<view class="guideAre topFixed" :style="{height: screenHeight+'px'}" v-if="isGuide" @touchmove.stop.prevent="moveHandle">
		<uni-transition :duration="duration" :mode-class="modeClass" :styles="transfromClass" :show="isGuide" @change="change">
			<slot></slot>
		</uni-transition>
		<view class="guideBtn" @click="guideBtn">
			<text>我知道了</text>
		</view>
	</view>
</template>

<script>
	export default {
		props:['transfromClass','modeClass','isGuide'],
		data() {
			return {
				duration: 2000,
				screenHeight: this.global.screenHeight,
			};
		},
		methods:{
			moveHandle(){
				return
			},
			guideBtn(){
				this.$emit('guideBtn')
			},
			change(e) {
				console.log(e.detail);
			}
		}
	}
</script>

<style lang="scss">
	.guideAre{
		@include width;
		@include backG(rgba($color: #000000, $alpha: 0.7),white);
		.guideBtn{
			@include width(200rpx);
			@include height(60rpx);
			@include border(2rpx,white);
			@include text-align;
			@include font($fontSize - 2rpx,white);
			position: fixed;
			bottom: 400rpx;
			left: 50%;
			@include margin(-100rpx,'left');
		}
	}
</style>
